<template>
  <div>
    <h1>商品管理</h1>
    <el-button type="primary" icon="el-icon-plus" style="float: right; transform: translateY(-40px);" @click="add">添加商品</el-button>
    <div class="box">
      <el-select v-model="value" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-input v-model="searVal" placeholder="关键词"></el-input>
      <el-button @click="postSearch">查询</el-button>
    </div>

    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column prop="id" label="ID" width="100px">
      </el-table-column>
      <el-table-column label="信息" width="500px">
        <template slot-scope="scope">
          <p>{{scope.row.name}}</p>
          <p>{{scope.row.subtitle}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格">
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <div class="status">
            <p>{{scope.row.status|type}}</p>
            <el-tag type="warning" @click="changeStatus(scope.row)">{{scope.row.status|type1}}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="250">
        <template slot-scope="scope">
          <el-button @click="goDetail(scope.row.id)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small" @click="$router.push({name:'save',params:{id:scope.row.id} })">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>
<script>
import { getGoods, getSeach, GoodsDetail, GoodsStatus} from "@/utils/API";
// import myPage from "@/components/myPage";

export default {
  data() {
    return {
      tableData: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      id: 0,
      options: [
        {
          value: "ID",
          label: "按商品id查询"
        },
        {
          value: "productName",
          label: "按商品名称查询"
        }
      ],
      searVal: "",
      value: ""
    };
  },
  components: {
    // myPage
  },
  methods: {
    render() {
      getGoods({ pageSize: this.pageSize, pageNum: this.pageNum }).then(res => {
        console.log(res);
        this.tableData = res.list;
        this.total = res.total;
      });
    },
    handleSizeChange(val) {
      // console.log("1111");
      this.pageSize = val;
      this.render()
    },
    add(){
     this.$router.push('/save')
    },
    handleCurrentChange(val) {
      console.log(val);
      this.pageNum = val;
      this.render();
    },
    postSearch() {
      if (this.value) {
        if (this.value === "ID") {
          this.type = "productId";
        } else {
          this.type = "productName";
        }
        getSeach({
          [this.type]: this.searVal
        }).then(res => {
          console.log(res);
          this.tableData = res.list;
          this.total = res.total;
        });
      } else {
        this.$message.warning("请选择查询条件");
      }
    },
    changeStatus(row) {
      console.log(row);

      this.$confirm("此操作将修改产品状态, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          GoodsStatus({
            productId: row.id,
            status: row.status == 1 ? 2 : 1
          }).then(res => {
            // console.log(res);
            this.render();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    goDetail(index) {
      console.log(index);
      this.$router.push(`/detail/${index}`);

      // this.$router.push({path:'/detail',query:{
      //   data:index
      // }})
      
    }
  },
  filters: {
    type(val) {
    
      return val == 1 ? "已下架" : "在售";
    },
    type1(val) {
    
      return val == 2 ? "下架" : "上架";
    }
  },
  mounted() {
    this.render();
    // this.handleSizeChange()
  }
};
</script>
<style lang="scss" scoped>
.box {
  width: 500px;
  display: flex;
}
.status {
  p {
    width: 50px;
  }
  margin: auto;
  width: 150px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
h1{
  font-size: 40px;
  
}
</style>
